
<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>IOS Hybrid开发 - Web基础 - 乐の博客</title>
	<meta name="author" content="zhidong">

	
	<meta name="description" content="IOS Hybrid开发 - Web基础 Hybrid开发就是native和web混合开发。他有两方面的优势：跨平台和更新快。
他同时涉及到web开发和native开发。
这里简单讲讲web开发。 Web常用目录结构: [name].html 页面文件 style.css 主样式文件 m- &hellip;">
	<meta name="keywords" content="iOS,Hybrid,Web">

  <!-- http://t.co/dKP3o1e -->
  <meta name="HandheldFriendly" content="True">
  <meta name="MobileOptimized" content="320">
  <meta name="viewport" content="width=device-width, initial-scale=1">

	<link href="/atom.xml" rel="alternate" title="乐の博客" type="application/atom+xml">
	
	<link rel="canonical" href="https://zhidong.rochu.cn/blog/2015/07/23/ios-hybridkai-fa-webji-chu/">
	<link href="/favicon.png" rel="shortcut icon">
	<link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css">
	<!--[if lt IE 9]><script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
	<script src="/javascripts/libs/jquery.min.js"></script>
	<!-- <link href='//fonts.googleapis.com/css?family=Open+Sans:400italic,400,700' rel='stylesheet' type='text/css'> -->
	
</head>


<body>
	<div class="container">
		<div class="left-col">
			<div class="intrude-less">
			<header id="header" class="inner"><div class="profilepic">	
	<script src="/javascripts/md5.js"></script>
	<script type="text/javascript">
		document.write("<img src='/images/pingtouge.png' alt='Profile Picture' style='width: 160px;' />");
	</script>
</div>
<h1><a href="/">乐の博客</a></h1>
<p class="subtitle">行而不思则罔，思而不行则怠</p>
<nav id="main-nav"><ul>
	<li><a href="/">Blog</a></li>
	<li><a href="/about">About</a></li>
	<li><a href="/portfolio">Portfolio</a></li>
	<li><a href="/archives">Archive</a></li>
</ul>
</nav>
<nav id="sub-nav">
	<div class="social">
		
		<a class="weibo" href="http://www.weibo.com/agdsdl" title="Weibo">Weibo</a>
		
		
		
		
		
		<a class="github" href="https://github.com/agdsdl" title="GitHub">GitHub</a>
		
		
		
		
		
		
		
		<a class="rss" href="/atom.xml" title="RSS">RSS</a>
		
	</div>
</nav>
<p class="description">知冬的后花园</p>
</header>				
			</div>
		</div>	
		<div class="mid-col">
			
				
			
			<div class="mid-col-container">
				<div id="content" class="inner"><article class="post" itemscope itemtype="http://schema.org/BlogPosting">
	<h1 class="title" itemprop="name">IOS Hybrid开发 - Web基础</h1>
	<div class="entry-content" itemprop="articleBody"><p>Hybrid开发就是native和web混合开发。他有两方面的优势：跨平台和更新快。
他同时涉及到web开发和native开发。
这里简单讲讲web开发。</p>

<ul>
<li>Web常用目录结构:</li>
</ul>


<p>[name].html 页面文件</p>

<p>style.css 主样式文件</p>

<p>m-style.css 移动平台主样式文件</p>

<p>img/ 图片目录</p>

<p>js/ javascript文件目录</p>

<p>css/ css文件目录</p>

<!-- more -->


<ul>
<li>html结构示意：</li>
</ul>


<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
<span class='line-number'>22</span>
<span class='line-number'>23</span>
<span class='line-number'>24</span>
<span class='line-number'>25</span>
<span class='line-number'>26</span>
<span class='line-number'>27</span>
<span class='line-number'>28</span>
<span class='line-number'>29</span>
<span class='line-number'>30</span>
<span class='line-number'>31</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>&lt;html&gt;
</span><span class='line'>&lt;head&gt;
</span><span class='line'>    &lt;meta charset="utf-8"&gt;
</span><span class='line'>    &lt;title&gt;抢红包&lt;/title&gt;
</span><span class='line'>    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"&gt;
</span><span class='line'>    &lt;link href="m-style.css" rel="stylesheet" /&gt;
</span><span class='line'>    &lt;script src="../vendor/jquery.js"&gt;&lt;/script&gt;
</span><span class='line'>&lt;/head&gt;
</span><span class='line'>&lt;body&gt;
</span><span class='line'>  &lt;div class="topbk"&gt;
</span><span class='line'>      &lt;img src="img/packet_bg@2x.png" width="100%"&gt;
</span><span class='line'>      &lt;p class="top_title"&gt;红包，先抢先得！&lt;/p&gt;
</span><span class='line'>      &lt;div class="packet_long"&gt;
</span><span class='line'>        &lt;div id="head_icon"&gt;&lt;/div&gt;
</span><span class='line'>        &lt;div id="scramble_button"&gt;光速抢&lt;/div&gt;
</span><span class='line'>        &lt;p id="packet_history"&gt;看看大家的手气&gt;&lt;/p&gt;
</span><span class='line'>      &lt;/div&gt;
</span><span class='line'>  &lt;/div&gt;
</span><span class='line'>    &lt;div class="packet_rules"&gt;
</span><span class='line'>    &lt;p&gt;
</span><span class='line'>      红包规则：
</span><span class='line'>    &lt;/p&gt;
</span><span class='line'>    &lt;p&gt;
</span><span class='line'>      1.手机绑定用户专享； &lt;br&gt;
</span><span class='line'>      2.每个红包，每个账户限领一次；
</span><span class='line'>    &lt;/p&gt;
</span><span class='line'>  &lt;/div&gt;
</span><span class='line'>    &lt;script src="nativeBridge.js"&gt;&lt;/script&gt;
</span><span class='line'>    &lt;script src="app.js"&gt;&lt;/script&gt;
</span><span class='line'>&lt;/body&gt;
</span><span class='line'>&lt;/html&gt;</span></code></pre></td></tr></table></div></figure>


<p><code>&lt;head&gt;</code>段声明页面属性、包含CSS文件、js文件。head会在body前被加载，一些需要预先加载的文件可以放在head中。
<code>&lt;body&gt;</code>段是页面内容
<code>&lt;p class="top_title"&gt;</code>p是段落元素, <code>class="top_title"</code>是元素属性，指定了该元素的类。
<code>&lt;div id="head_icon"&gt;</code>div是块元素， <code>id="head_icon"</code>指定了元素的id.
<code>&lt;img src="img/packet_bg@2x.png"&gt;</code>img是图像元素, 这里通过src属性指定了该图像的图片地址。</p>

<ul>
<li>CSS结构示意：</li>
</ul>


<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
<span class='line-number'>13</span>
<span class='line-number'>14</span>
<span class='line-number'>15</span>
<span class='line-number'>16</span>
<span class='line-number'>17</span>
<span class='line-number'>18</span>
<span class='line-number'>19</span>
<span class='line-number'>20</span>
<span class='line-number'>21</span>
<span class='line-number'>22</span>
<span class='line-number'>23</span>
<span class='line-number'>24</span>
<span class='line-number'>25</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>html {
</span><span class='line'>  height: 100%;
</span><span class='line'>}
</span><span class='line'>body {
</span><span class='line'>  min-width: 320px;
</span><span class='line'>  margin: 0;padding: 0;
</span><span class='line'>  background-color:#FCECD3;
</span><span class='line'>}
</span><span class='line'>
</span><span class='line'>.topbk{
</span><span class='line'>  text-align: center;
</span><span class='line'>}
</span><span class='line'>#scramble_button{
</span><span class='line'>  position: absolute;
</span><span class='line'>
</span><span class='line'>  background: url(img/packet_button@2x.png) no-repeat;
</span><span class='line'>  background-size: 100% 100%;
</span><span class='line'>
</span><span class='line'>  top:150px;
</span><span class='line'>  left:50%;
</span><span class='line'>  width:180px;
</span><span class='line'>  height:27px;
</span><span class='line'>  margin-left:-40%;
</span><span class='line'>  padding-top:10px;
</span><span class='line'>}</span></code></pre></td></tr></table></div></figure>


<p>   这是CSS样式的基本语法
   &ldquo;XXX"是元素选择器，选择所有XXX元素。
   &rdquo;.XXX"是类选择器，选择所有class=XXX的元素。
   &ldquo;#XXX"是id选择器，选择所有id=XXX的元素。</p>

<ul>
<li><p>js结构示意
js可以独立成js文件，也可以嵌入在html页面中。</p></li>
<li><p>引用js文件:
<code>
 &lt;script src="../vendor/jquery.js"&gt;&lt;/script&gt;
</code></p></li>
<li><p>内嵌js：
<code>
&lt;script&gt;
require(['app/packet_history'], function(model) {
  model.init();
});
&lt;/script&gt;
</code></p></li>
</ul>


<p> 因为浏览器会按顺序解析标签，将script放到body的最后可以防止script的加载阻塞整个页面的渲染。</p>

<ul>
<li>Web技术（html,css,javascript）参考网站：</li>
</ul>


<p> <a href="https://developer.mozilla.org/zh-CN/docs/Web">https://developer.mozilla.org/zh-CN/docs/Web</a></p>

<p> <a href="http://www.w3school.com.cn/">http://www.w3school.com.cn/</a></p>

<ul>
<li>使用jquery：</li>
</ul>


<p> <a href="http://jquery.com/">jquery</a>是一个极通用的JavaScript库，通过他提供的选择器和封装的功能函数，可以大大简化web开发。</p>

<p> jquery初始化后，定义全局变量$符号作为jquery对象的简写。</p>

<p> 简单示例：</p>

<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>$(document).ready(function(){
</span><span class='line'>  $("button").click(function(){
</span><span class='line'>    $("p").hide();
</span><span class='line'>  });
</span><span class='line'>});</span></code></pre></td></tr></table></div></figure>


<p>这段代码功能：当页面里有按钮被点击后，隐藏所有的段落元素。</p>

<ul>
<li>jquery选择器</li>
</ul>


<p>  $(&ldquo;p&rdquo;) 选取所有 p 元素。</p>

<p>  $(&lsquo;.more&rsquo;) 选取class=&ldquo;more"的元素</p>

<p>  $(&lsquo;#scrumble_button&rsquo;) 选取 id=&ldquo;scrumble_button"的元素</p>

<ul>
<li>ajax请求</li>
</ul>


<figure class='code'><div class="highlight"><table><tr><td class="gutter"><pre class="line-numbers"><span class='line-number'>1</span>
<span class='line-number'>2</span>
<span class='line-number'>3</span>
<span class='line-number'>4</span>
<span class='line-number'>5</span>
<span class='line-number'>6</span>
<span class='line-number'>7</span>
<span class='line-number'>8</span>
<span class='line-number'>9</span>
<span class='line-number'>10</span>
<span class='line-number'>11</span>
<span class='line-number'>12</span>
</pre></td><td class='code'><pre><code class=''><span class='line'>  $.ajax({
</span><span class='line'>     url: '...',
</span><span class='line'>     type: 'POST',
</span><span class='line'>     dataType: 'json',
</span><span class='line'>     data: {pkgId: '1'},
</span><span class='line'>     success:function(data){
</span><span class='line'>         //解析返回数据
</span><span class='line'>     }
</span><span class='line'>     error:function(request, description, exception) {
</span><span class='line'>
</span><span class='line'>     }
</span><span class='line'> })</span></code></pre></td></tr></table></div></figure>


<p> <a href="http://www.w3school.com.cn/jquery/">jquery中文学习地址</a></p>

<ul>
<li>js模块化</li>
</ul>


<p> javascript本身没有提供模块化的功能，所有的js代码都在全局命名空间运行，并且不支持依赖关系。
 幸好我们有第三方可框架可以给我们提供模块化功能。目前主流的模块化规范有两种。</p>

<ul>
<li>AMD</li>
</ul>


<p>  <a href="http://www.requirejs.cn/">RequireJS</a></p>

<ul>
<li>CMD</li>
</ul>


<p>  <a href="http://seajs.org/docs/">SeaJS</a></p>

<p> <a href="http://justineo.github.io/singles/writing-modular-js/">js模块化参考</a></p>

<ul>
<li>Apache Tomcat使用</li>
<li>到其<a href="http://tomcat.apache.org/">官网</a>下载最新安装包，</li>
<li>解压后运行bin/startup.sh就会启动tomcat服务器。</li>
<li>如果之前没有配置过java的话，你可能需要配置JAVA_HOME环境变量：
<code>
export JAVA_HOME=/Library/Java/JavaVirtualMachines/jdk***/Contents/Home
</code></li>
<li>将网页拷贝到webapps中，这样我们的网页就可以通过url远程访问。本例地址：<code>http://127.0.0.1:8080/wap/test\_packet/packet.html</code></li>
</ul>

</div>

</article>
<!-- 
	<div class="share">
	<div class="addthis_toolbox addthis_default_style addthis_16x16_style">
	
	
	
	
	
	<a class="addthis_button_compact"></a>
	<a class="addthis_counter addthis_bubble_style"></a>
	</div>
  <script type="text/javascript" src="http://s7.addthis.com/js/300/addthis_widget.js#pubid="></script>
</div>

 -->


<section id="comment">
    <h1 class="title">Comments</h1>
    <div id="gitalk-container"></div>
    <link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css">
    <script src="https://unpkg.com/gitalk/dist/gitalk.min.js"></script>
    <script>
    const gitalk = new Gitalk({
    clientID: '29bbf743e30b99394771',
    clientSecret: '41e4b7f1aa79742fc459f2971ad51596df5e4dda',
    repo: 'agdsdl.github.io',
    owner: 'agdsdl',
    admin: ['agdsdl'],
    id: location.pathname,      // Ensure uniqueness and length less than 50
    distractionFreeMode: false  // Facebook-like distraction free mode
    })

    gitalk.render('gitalk-container')
    </script>
</section></div>
			</div>
			<footer id="footer" class="inner">Copyright &copy; 2019

    zhidong

<br>
Powered by Octopress.

Design credit: <a href="http://shashankmehta.in/archive/2012/greyshade.html">Shashank Mehta</a></footer>
			<script src="/javascripts/slash.js"></script>
<!-- <script src="/javascripts/jquery.fancybox.pack.js"></script>
<script type="text/javascript">
(function($){
	$('.fancybox').fancybox();
})(jQuery);
</script> Delete or comment this line to disable Fancybox -->




	<script type="text/javascript">
		var _gaq = _gaq || [];
		_gaq.push(['_setAccount', 'UA-65560025-1']);
		_gaq.push(['_trackPageview']);

		(function() {
			var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
			ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
			var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
		})();
	</script>



		</div>
	</div>
</body>
</html>
